<template>
  <div>
    <h1>区块链浏览器</h1>
    <nav>
      <button @click="currentTab = 'create'">创建账号</button>
      <button @click="currentTab = 'send'">发送交易</button>
      <button @click="currentTab = 'queryTx'">交易查询</button>
      <button @click="currentTab = 'queryBalance'">余额查询</button>
      <button @click="currentTab = 'mine'">挖矿</button>
    </nav>
    <hr />
    <div v-if="currentTab === 'create'">
      <CreateAccount />
    </div>
    <div v-if="currentTab === 'send'">
      <SendTransaction />
    </div>
    <div v-if="currentTab === 'queryTx'">
      <QueryTransaction />
    </div>
    <div v-if="currentTab === 'queryBalance'">
      <QueryBalance />
    </div>
    <div v-if="currentTab === 'mine'">
      <Mining />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import CreateAccount from './components/CreateAccount.vue'
import SendTransaction from './components/SendTransaction.vue'
import QueryTransaction from './components/QueryTransaction.vue'
import QueryBalance from './components/QueryBalance.vue'
import Mining from './components/Mining.vue'

export default {
  name: 'App',
  components: {
    CreateAccount,
    SendTransaction,
    QueryTransaction,
    QueryBalance,
    Mining
  },
  setup() {
    // 默认显示创建账号
    const currentTab = ref('create')
    return { currentTab }
  }
}
</script>

<style>
nav button {
  margin-right: 10px;
  padding: 5px 10px;
}
</style>
